/**
 * 概要：验证码功能的数据来自于自家项目/三方的接口，因此需要使用网络请求。还需要注意接口是否可以跨域，如果不支持跨域我们可能需要在本地做代理操作。在写代码的过程中注意封装的特性。
 * 注意点：
 *      1. 验证码的key值不适合写在当前组件自身state中，因为当前组件可能被一个组件同时使用，进而产生key值覆盖的问题；
 *      2. 子传父的情况，不能使用是ref，如果用ref会导致验证码与key值可能存在不匹配的情况；
 * 
 * 组件名：Captcha
 * 作用：封装的验证码组件
 * props：
 *      - w：验证码的宽度，默认120
 *      - h：验证码的高度，默认为36
 *      - saveKey：将key值传递给父的方法，接受一个参数，参数为key值
 */

import React, { Component } from "react"
import axios from "axios"
class Captcha extends Component {
    static defaultProps = {
        w: 120,
        h: 36,
    }
    state = {}
    source = axios.CancelToken.source()
    render() {
        return (
            <>
                <img src={this.state.img} width={this.props.w} height={this.props.h} alt="验证码" title="点击刷新" onClick={this.loadCaptcha} />
            </>
        )
    }

    componentDidMount() {
        this.loadCaptcha()
    }

    // 请求网络，获取验证码信息
    loadCaptcha = () => {
        axios
            .get("https://reactapi.iynn.cn/captcha/api/math", {
                cancelToken: this.source.token,
            })
            .then(res => {
                // res.data：网络请求的返回值（obj）
                this.setState(res.data)
                // 将key值写到父
                this.props.saveKey(res.data.key)
            })
            .catch(e => {})
    }

    componentWillUnmount() {
        // 取消请求
        this.source.cancel()
    }
}

export default Captcha
